<template>
  <div class="module-header">
    {{ `材料列表` }}
    <div class="module-header-search">
      物料编号或物料名称：
      <el-input size="default" v-model="searchWord" clearable placeholder="输入材料编号或材料名等"/>
      <el-button size="default" type="primary" @click="currentPage=1;getData()">搜索</el-button>
      <el-button size="default" type="primary" @click="dialogVisible = true">新增材料</el-button>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="" width="30%" draggable>
    <el-row>
      <el-col :span="23">
        <el-form :model="material" label-width="100px" size="default">
          <el-form-item label="材料编号：">
            <el-input v-model="material.code"/>
          </el-form-item>
          <el-form-item label="材料名称：">
            <el-input v-model="material.name"/>
          </el-form-item>
          <el-form-item label="材料单位：">
            <el-switch v-model="material.unit" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #49b9ff"
                       active-text="张" inactive-text="卷" active-value="张" inactive-value="卷"/>
          </el-form-item>
          <el-form-item label="材料供应商：">
            <el-input v-model="material.supplier"/>
          </el-form-item>
          <el-form-item label="材料备注：">
            <el-input v-model="material.description"/>
          </el-form-item>
          <el-form-item label="材料状态：">
            <el-switch v-model="material.enabled" style="--el-switch-on-color: #999; --el-switch-off-color: #4B9EFB"
                       active-text="已停用" :active-value="false" inactive-text="使用中" inactive-value="true"/>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
  <div class="table-content">
    <el-table :data="matList" style="width: 100%" stripe empty-text="没有数据">
      <el-table-column prop="code" label="材料编号" width="120"></el-table-column>
      <el-table-column prop="name" label="材料名称" width="120"></el-table-column>
      <el-table-column prop="unit" label="材料单位" width="80"></el-table-column>
      <el-table-column prop="description" label="材料备注"></el-table-column>
      <el-table-column label="管理" fixed="right" width="196">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" @click="handleRuler(scope.row)">尺寸</el-button>
          <el-button size="small" type="danger" @click="handleDeactivate(scope.$index, scope.row)">停用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20]"
                   background layout="prev, pager, next, sizes" small :total="recordCount" current-page="1"
                   :default-page-size="10"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>
</template>

<script lang="ts">
import {Options, Vue} from 'vue-class-component';
import BomModel from "@/models/BomModel";
import {BackendPageModel} from "@/models/BackendPageModel";
import {getMaterial} from "@/apis/material.api";
import MaterialModel from "@/models/MaterialModel";

@Options({})
export default class MaterialView extends Vue {
  private dialogVisible = false;
  private currentPage = 1;
  private pageSize = 10;
  private recordCount = 0;
  private searchWord = '';
  private matList: MaterialModel[] = [];
  private material: MaterialModel = new MaterialModel();

  created(): void {
    this.getData();
  }

  getData(): void {
    getMaterial(this.searchWord, this.currentPage, this.pageSize).then((value: BackendPageModel<MaterialModel>): void => {
      this.matList = value.content
      this.recordCount = value.totalElements;
    })
  }

  handleRuler(row: BomModel): void {
    console.log(row)
  }

  handleEdit(rowIndex: number, row: BomModel): void {
    console.log(rowIndex, row)
  }

  handleDeactivate(rowIndex: number, row: BomModel): void {
    console.log(rowIndex, row)
  }

  handleCurrentChange() {
    this.getData();
  }

  handleSizeChange() {
    this.getData();
  }
}
</script>

<style scoped>
.module-header > .module-header-search {
  width: 540px;
}
</style>